<?php

namespace App\Admin\Controllers;

use App\Http\Controllers\Controller;
use App\Product;
use Encore\Admin\Admin;
use Encore\Admin\Controllers\Dashboard;
use Encore\Admin\Layout\Column;
use Encore\Admin\Layout\Content;
use Encore\Admin\Layout\Row;

class HomeController extends Controller
{
    public function index(Content $content)
    {
        $data = Product::All()->map(function ($product) {
            $record = $product->records()->latest()->first();
            return [
                'name' => $product->name,
                'lat' => $product->lat,
                'lng' => $product->lng,
                'it' => $record->it,
                'et' => $record->et,
                'rh' => $record->rh
            ];
        });
        Admin::script($this->script($data));
        return $content
            ->header('改造区域')
            // ->description('description')
            ->body(view('index.map'));
        // return $content
        //     ->header('Dashboard')
        //     ->description('Description...')
            // ->row(Dashboard::title())
            // ->row(function (Row $row) {

            //     $row->column(4, function (Column $column) {
            //         $column->append(Dashboard::environment());
            //     });

            //     $row->column(4, function (Column $column) {
            //         $column->append(Dashboard::extensions());
            //     });

            //     $row->column(4, function (Column $column) {
            //         $column->append(Dashboard::dependencies());
            //     });
            // });
    }

    public function script($data)
    {
        return <<<EOT
         $('.box img').click(function(){
        $('.box').hide()
    })
    var res = {$data};

    var center = new qq.maps.LatLng(29.876663,118.710542);
    var map = new qq.maps.Map(document.getElementById('container'),{
        center: center,
        zoom: 7
    });

    getPositon(res, map)

function getPositon(res, map) {
    var infoWin = new qq.maps.InfoWindow({
        map: map
    });
    infoWin.open();

    for(var i of res){

       var maker = new qq.maps.Label({
            position: new qq.maps.LatLng(i.lat,i.lng),
            map: map,
            content:i.name
        });
       qq.maps.event.addListener(
        maker,
        'click',
        function(evt) {
            for(var j of res){
                if(j.lat == evt.latLng.lat && j.lng == evt.latLng.lng){
                    evt.latLng.name = j.name
                    evt.latLng.et = j.et
                    evt.latLng.it = j.it
                    evt.latLng.rh = j.rh
                }
            }
            infoWin.open();
            $('.it').text(evt.latLng.it)
            $('.et').text(evt.latLng.et)
            $('.rh').text(evt.latLng.rh)
            $('.chartLayer a').attr('data-title',evt.latLng.name)
            infoWin.setContent($('.chartLayer').html());
            infoWin.setPosition(evt.latLng);
        }
        );
   }
}

    var myChart = null
    $('body').on('click','.chartLayer a',function(){
        var title = $(this).data('name')
        $.ajax({
          url:'http://manager.iyineng.com/treeData',
          type:'post',
          data:{
            title:$(this).data('title'),
            type:title == '温度'?'te':'rh'
          },
          success(res){
            $('.box').show()
                myChart = echarts.init(document.getElementById('main'));
                myChart.clear();
                  // 指定图表的配置项和数据
                  var option = {
                    backgroundColor:'rgba(255,255,255,.8)',
                    title: {
                      text: title == '温度'?'内/外温度':'相对湿度'
                    },
                    tooltip : {
                      trigger: 'axis'
                    },
                    legend: {
                      data:res.titles
                    },
                    xAxis: {
                      data:res.times
                    },
                    yAxis: {},
                    series: res.data
                  };
                  myChart.setOption(option);
          }
        })
    })
EOT;
    }
}
